@extends('layouts._order')
@section('main')
    <div class="i_bg bg_color">
        <!--Begin 用户中心 Begin -->
        <div class="m_content">

            @include('layouts._orderleft')

            <div class="m_right" id="addres">

                <div class="mem_tit"></div>

                <table border="0" class="add_tab" style="width:930px;"  cellspacing="0" cellpadding="0">
                    <tr >
                        <td width="135" align="right">配送地区</td>
                        <td colspan="3" style="font-family:'宋体';" >
                            <select class="jj" name="province" style="background-color:#f6f6f6;" @change="jibie2=$event.target.value">
                                <option :value="addresses.province[0].region_id" selected="selected">@{{ addresses.province[0].region_name }}</option>
                                <option :value="v.region_id" v-for="v in places" v-if="v.parent_id==1" >@{{ v.region_name }}</option>
                            </select>
                            <select class="jj" name="city" style="background-color:#f6f6f6;" @change="jibie3=$event.target.value">
                                <option :value="addresses.city[0].region_id" selected="selected">@{{ addresses.city[0].region_name }}</option>
                                <option :value="v.region_id" v-for="v in places" v-if="v.parent_id==jibie2" >@{{ v.region_name }}</option>
                            </select>
                            <select class="jj" name="district" style="background-color:#f6f6f6;">
                                <option :value="addresses.district[0].region_id" selected="selected">@{{ addresses.district[0].region_name }}</option>
                                <option :value="v.region_id" v-for="v in places" v-if="v.parent_id==jibie3" >@{{ v.region_name }}</option>
                            </select>

                            （必填）
                        </td>
                    </tr>
                    <tr>
                        <td align="right">收货人姓名</td>
                        <td style="font-family:'宋体';"><input type="text" class="add_ipt" name="address_name" :value="addresses.address_name" />（必填）</td>
                        <td align="right">电子邮箱</td>
                        <td style="font-family:'宋体';"><input type="text" class="add_ipt" name="email" :value="addresses.email" />（必填）</td>
                    </tr>
                    <tr>
                        <td align="right">详细地址</td>
                        <td style="font-family:'宋体';"><input type="text" class="add_ipt" name="address" :value="addresses.address" />（必填）</td>
                        <td align="right">邮政编码</td>
                        <td style="font-family:'宋体';"><input type="text" class="add_ipt" name="zipcode" :value="addresses.zipcode" /></td>
                    </tr>
                    <tr>
                        <td align="right">手机</td>
                        <td style="font-family:'宋体';"><input type="text" class="add_ipt" name="mobile" :value="addresses.mobile" />（必填）</td>
                        <td align="right">电话</td>
                        <td style="font-family:'宋体';"><input type="text" class="add_ipt" name="tel" :value="addresses.tel" /></td>
                    </tr>
                    <tr>
                        <td align="right">标志建筑</td>
                        <td style="font-family:'宋体';"><input type="text" class="add_ipt" name="sign_building" :value="addresses.sign_building" /></td>
                        <td align="right">最佳送货时间</td>
                        <td style="font-family:'宋体';"><input type="text" class="add_ipt" name="best_time" :value="addresses.best_time" /></td>
                    </tr>
                </table>

                <p align="right" style="margin-top: 20px;">
                    <a class="add_b" @click="sub">确认</a>
                </p>
            </div>
        </div>
        <!--End Footer End -->
    </div>
@endsection
@section('js')
    {{--编写js代码--}}
    <script src="{{ mix('js/app.js') }}"></script>
    {{--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>--}}
    <script>
        var address_id="{{ $address_id }}";
        var token = "{{session('admin')}}";

        new Vue({
            el:'#addres',
            data:{
                places:[],
                addresses:[],
                jibie2:"",
                jibie3:'',
            },
            //事件触发的函数在这里面
            methods:{
                sub:function(){
                    var province=$("[name='province']").val();
                    var city=$("[name='city']").val();
                    var district=$("[name='district']").val();
                    var address_name=$("[name='address_name']").val();
                    var email=$("[name='email']").val();
                    var address=$("[name='address']").val();
                    var zipcode=$("[name='zipcode']").val();
                    var mobile=$("[name='mobile']").val();
                    var tel=$("[name='tel']").val();
                    var sign_building=$("[name='sign_building']").val();
                    var best_time=$("[name='best_time']").val();
                    $.ajax({
                        type:'post',
                        url:'http://shopapi.cn/api/my/saveMyAddress',
                        data:{
                            token:token,
                            user_id:"{{ session('admin_info.user_id') }}",
                            address_id:address_id,
                            province:province,
                            city:city,
                            district:district,
                            address_name:address_name,
                            email:email,
                            address:address,
                            zipcode:zipcode,
                            mobile:mobile,
                            tel:tel,
                            sign_building:sign_building,
                            best_time:best_time
                        },
                        success:function(res)
                        {
                            if(res.code==1)
                            {
                                layer.msg(res.msg);
                                window.location.href="/ordercenter/delivery_address";
                            }
                            else
                            {
                                layer.msg(res.msg);
                                window.location.href="/ordercenter/delivery_address";
                            }
                        }
                    })
                }
            },

            mounted(){
                axios({
                    method: 'get',
                    url: 'http://shopapi.cn/api/my/getOneAddress',
                    params:{
                        address_id:address_id,
                        token:token
                    }
                })
                .then(
                    (res)=>{
                        this.addresses=res.data.data;
                    }
                );

                axios({
                    method: 'get',
                    url: 'http://shopapi.cn/api/auth/getAddress',
                })
                .then(
                    (res)=>{
                        this.places=res.data.data;
                    }
                );


            },
        });
    </script>
@endsection